<div class="containerStyle">
  <h3>描述</h3>
  <p>表头固定和无数各种场景测试</p>
  <h3>示例</h3>
  <h4>无数据(ti3-table-nodata)</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <!--注意:给表格设置宽度时，给.ti3-table-fixed-head和.ti3-table-container下的对应的th都要设置-->
            <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <div *ngIf="false">dasdf</div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container" style="max-height: 420px">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns" width="{{column.width}}"></th>
          </tr>
        </thead>
        <tbody *ngIf="displayed.length > 0">
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
        </tbody>
        <tbody *ngIf="displayed.length === 0">
          <tr class="ti3-table-nodata">
            <td tiColspan>{{noDadaInfo}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
  <br />
  <h4>无数据("ti3-table-nodata-guide)</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <!--注意:给表格设置宽度时，给.ti3-table-fixed-head和.ti3-table-container下的对应的th都要设置-->
            <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <div *ngIf="false">dasdf</div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container" style="max-height: 420px">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns" width="{{column.width}}"></th>
          </tr>
        </thead>
        <tbody *ngIf="displayed.length > 0">
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
        </tbody>
        <tbody *ngIf="displayed.length === 0">
          <tr class="ti3-table-nodata-guide">
            <td tiColspan>
              <span>{{noGoodsInfo}}</span>
              <a href="javascript:void(0)">{{goShopInfo}}</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>

  <h4>加载失败(ti3-table-loadfail)</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <!--注意:给表格设置宽度时，给.ti3-table-fixed-head和.ti3-table-container下的对应的th都要设置-->
            <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <div *ngIf="false">dasdf</div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container" style="max-height: 420px">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns" width="{{column.width}}"></th>
          </tr>
        </thead>
        <tbody *ngIf="status !== 404">
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
        </tbody>
        <tbody *ngIf="status === 404">
          <tr class="ti3-table-loadfail">
            <td tiColspan>
              <span>{{failLoadInfo}}</span>
              <a href="javascript:void(0)">{{reloadInfo}}</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
  <br />
  <br />
  <h4>无数据简单类型(ti3-table-nodata-simple)</h4>
  <br /><br />
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <!--注意:给表格设置宽度时，给.ti3-table-fixed-head和.ti3-table-container下的对应的th都要设置-->
            <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <div *ngIf="false">dasdf</div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container" style="max-height: 420px">
      <table>
        <thead>
          <tr>
            <th *ngFor="let column of columns" width="{{column.width}}"></th>
          </tr>
        </thead>
        <tbody *ngIf="displayed.length > 0">
          <tr *ngFor="let row of displayed">
            <td tiOverflow>{{row.firstName}}</td>
            <td tiOverflow>{{row.lastName}}</td>
            <td tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
          </tr>
        </tbody>
        <tbody *ngIf="displayed.length === 0">
          <tr class="ti3-table-nodata-simple">
            <td tiColspan>{{noDadaInfo}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
</div>
